"use client";
import { useRouter } from "next/navigation";
import { type FormEvent, useState } from "react";
import { useToast } from "@/components/Toast";
import { type ApiError, api } from "@/lib/client/api";

export function OverrideForm({ runId, gates }: { runId: string; gates: string[] }) {
  const router = useRouter();
  const toast = useToast();
  const [busy, setBusy] = useState(false);
  return (
    <form
      className="mt-2 space-y-2"
      onSubmit={async (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        setBusy(true);
        try {
          await api(`/api/admin/quality/${runId}/override`, {
            json: { rationale: new FormData(e.currentTarget).get("rationale") },
          });
          toast.push("success", "Override recorded; run now awaits explicit publication.");
          router.refresh();
        } catch (err) {
          toast.push("error", (err as ApiError).message);
        } finally {
          setBusy(false);
        }
      }}
    >
      <p className="muted text-sm">
        Overriding: <code className="text-xs">{gates.join(", ")}</code>. The rationale is permanently recorded
        in the audit log and the publication decision.
      </p>
      <label htmlFor="rationale" className="label">
        Rationale (min 20 characters)
      </label>
      <textarea id="rationale" name="rationale" required minLength={20} rows={3} className="input" />
      <button type="submit" className="btn btn-danger" disabled={busy}>
        Record override
      </button>
    </form>
  );
}